<template>
  <div class="col w lter b-r fstree" v-loading="ifSub">
    <div class="wrapper b-b">
      <div class="font-thin h4">
        <a class="btn-danger btn btn-sm font-bold" @click="loadTree()">栏目树</a>
      </div>
    </div>
    <div class="treeStyles" :style="{height:bodyHeight-89+'px'}">
      <ul id="sys-column-tree" class="ztree" style="margin-top: 0;"></ul>
    </div>
    <div style="clear: both;"></div>
  </div>
</template>
<script>

  import $ from 'jquery'
  import '../../../../plugins/zTree/css/zTreeStyle/fs_zTreeStyle.css'
  import '../../../../plugins/zTree/js/jquery.ztree.all.min'
  import Vue from 'vue'
  import {SERVICE_URLS} from '../../../../config/service.url'
  import {updateColumnChoose} from './update.choose'

  export default{
    data(){
      return {
        "ifSub": true
      }
    },
    computed: {
      bodyHeight(){
        return this.$store.state.bodyHeight;
      }
    },
    mounted(){
      this.loadTree();
      //$(".treeStyles").scrollUnique();
    },
    methods: {
      getOne(treeNode){
        updateColumnChoose(this, treeNode);
      },
      loadTree(){
        let mouseClick = 0;
        let treeNodeId;
        const self = this;
        const setting = {
          check: {enable: false},
          view: {
            selectedMulti: false
          },
          data: {
            simpleData: {
              enable: true
            }
          },
          callback: {
            onClick: function (treeId, treeName, treeNode) {
              if (treeNodeId == treeNode.id) {
                if ((treeId.timeStamp - mouseClick) < 500) {
                  mouseClick = treeId.timeStamp;
                  treeNodeId = treeNode.id;
                  return;
                }
              }
              treeNodeId = treeNode.id;
              mouseClick = treeId.timeStamp;
              //                if(treeNode.isParent){
              //                    treeObj.expandNode(treeNode);
              //                }
              self.getOne(treeNode);
            }
          }
        };
        let treeObj;
        Vue.submit(self, {
          url: SERVICE_URLS.column.tree,
          data: {},
          noTips: true,
          callback: function (data) {
            $.fn.zTree.init($("#sys-column-tree"), setting, data.body);
            treeObj = $.fn.zTree.getZTreeObj("sys-column-tree");
            const treeNode = treeObj.getNodes()[0];
            treeObj.selectNode(treeNode);
            treeObj.expandNode(treeNode);
            self.$store.commit('cacheDataUpdate', {
              name: 'treeObj',
              value: treeObj
            })
            self.getOne(treeNode);
          }
        }, Vue)
      }
    }
  }
</script>
